@import '../../../common/less/mixin.less';
@import '../../../common/less/base.less';

.food-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 48px;
    z-index: 8;
    width: 100%;
    background: #fff;
    transform: translate3d(0,0,0);
    transition: all .2s linear;
    &.move-enter, &.move-leave-to {
        transform: translate3d(100%,0,0);
    }
    .content {
        .pic-header {
            position: relative;
            width: 100%;
            height: 0;
            padding-top: 100%;
            img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            .back {
                position: absolute;
                top: 10px;
                left: 0;
                .icon-arrow_lift {
                    display: block;
                    padding: 10px;
                    font-size: 20px;
                    color: #fff;
                }
            }
        }
        .food-main {
            position: relative;
            padding: 18px;
            .title {
                font-weight: 700;
                font-size: 14px;
                line-height: 14px;
                color: rgb(7,17,27);
                margin-bottom: 8px;
            }
            .detail {
                font-size: 0;
                line-height: 10px;
                margin-bottom: 18px;
                .sell-count, .rating {
                    font-size: 10px;
                    color: rgb(147,153,159);
                }
                .sell-count {
                    margin-right: 12px;
                }
            }
            .price {
                font-weight: 700;
                line-height: 24px;
                .now {
                    margin-right: 8px;
                    font-size: 14px;
                    color: rgb(240, 20, 20);
                }
                .old {
                    text-decoration: line-through;
                    font-size: 10px;
                    color: rgb(147,153,159);
                }
            }
            .cartcontrol-wrapper {
                position: absolute;
                right: 12px;
                bottom: 12px;
            }
            .add-shopcart {
                position: absolute;
                right: 18px;
                bottom: 18px;
                z-index: 3;
                font-weight: 200;
                font-size: 10px;
                line-height: 24px;
                color: #fff;
                height: 24px;
                padding: 0 12px;
                box-sizing: border-box;
                background: rgb(0, 160, 220);
                border-radius: 12px;
                transition: all .2s linear;
                opacity: 1;
                &.fade-center, &.fade-leave-to {
                    opacity: 0;
                }
            }
        }
        .info {
            padding: 18px;
            .title {
                line-height: 14px;
                margin-bottom: 6px;
                font-size: 14px;
                color: rgb(7,17,27);
            }
            .text {
                line-height: 24px;
                font-size: 12px;
                padding: 0 8px;
                color: rgb(77,85,93);
            }
        }
        .rating {
            padding: 18px 0;
            .title {
                padding-left: 18px;
                line-height: 14px;
                margin-bottom: 6px;
                font-size: 14px;
                color: rgb(7,17,27);
            }
            .rating-wrapper {
                padding: 0 18px;
                .rating-item {
                    position: relative;
                    padding: 16px 0;
                    .border-1px(rgba(7,17,27,.1));
                    &:last-child {
                        &:after {
                            display: none;
                        }
                    }
                    .user {
                        position: absolute;
                        top: 16px;
                        right: 0;
                        font-size: 0;
                        line-height: 12px;
                        .name {
                            display: inline-block;
                            vertical-align: top;
                            font-size: 10px;
                            color: rgb(147,153,159);
                            margin-right: 6px;
                        }
                        .avatar {
                            border-radius: 50%;
                        }
                    }
                    .time {
                        font-size: 10px;
                        line-height: 12px;
                        color: rgb(147,153,159);
                        margin-bottom: 6px;
                    }
                    .text {
                        line-height: 16px;
                        font-size: 12px;
                        color: rgb(7,17,27);
                        .icon-thumb_up, .icon-thumb_down {
                            margin-right: 4px;
                            line-height: 16px;
                            font-size: 12px;
                        }
                        .icon-thumb_up {
                            color: rgb(0, 160, 220);
                        }
                        .icon-thumb_down {
                            color: rgb(147,153,159);
                        }
                    }
                }
                .empty {
                    padding: 16px 0;
                    font-size: 12px;
                    color: rgb(147,153,159);
                    text-align: center;
                }
            }
        }
    }
}